<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="static/css/tableTest.css">
    <meta charset="UTF-8">
    <title>tableText</title>
</head>
<body>
    <div class="panel panel-default">
        <div class="panel-heading clearfix">
            <div class="pull-left">
                <button class="btn btn-success" data-toggle="modal" data-target="#newPopUp">New</button>
                <button class="btn btn-warning">Disable</button>
                <button class="btn btn-danger">Delete</button>
            </div>
            <div class="pull-right">
                <div class="btn-group">
                    <button type="button" class="btn btn-default dropdown-toggle active" data-toggle="dropdown">
                        Filter by Disable <span class="caret"></span>

                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Filter by Account Status</a></li>
                        <li><a href="#">Filter by Department</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Reset</a></li>
                    </ul>
                </div>
                <div class="btn-group">
                    <button type="button" class="btn btn-default dropdown-toggle active" data-toggle="dropdown">
                        Sort by FirstName <span class="caret"></span>

                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Sort by FirstName</a></li>
                        <li><a href="#">Sort by LastName</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Reset</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <table class="table table-bordered table-hover">
            <thead></thead>
            <tbody></tbody>
            <tfoot></tfoot>
        </table>
        <ul>
            <li class="list-group-item">
                <ul class="pagination">
                    <li class="disabled"><span> Prev</span></li>
                    <li class="active"><a href="#">1<span class="sr-only">(current)</span></a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li class="disable"><span>...</span></li>
                    <li><a href="#">14</a></li>
                    <li><a href="#">15</a></li>
                    <li><a href="#">16</a></li>
                    <li><a href="#">Next</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="modal fade" id="rolePopUp">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Roles of Huangiris</h4>
                </div>
                <div class="modal-body">
                    <table class="table table-hover">...</table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="newPopUp">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="mynewlLabel">New a info</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                            <div class="col-sm-10">
                                <input type="email" class="form-control" id="Email" placeholder="Email">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                            <div class="col-sm-10">
                                <input type="password" class="form-control" id="Password" placeholder="Password">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">Username</label>
                            <div class="col-sm-10">
                                <input type="email" class="form-control" id="Username" placeholder="Username">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox">Enable
                                    </label>

                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Create</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Reset</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>

</body>
<script src="static/js/jquery.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/jsmine/tableTest.js"></script>
</html>